<template>
    <div>
    <!-- 使用 Element UI 的表格 -->
    <el-input v-model="searchQuery" placeholder="搜索姓名或学号"
    @keyup.enter.native="searchzc"/>
    <el-button @click="searchzc">搜索</el-button>
    <el-button @click="reset">重置</el-button>
   <!-- 使用 Element UI 的表格 -->
    <el-table :data="overTime" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <span class="table-text">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="week" label="周数" width="180">
        <template slot-scope="scope">
          <span class="table-text">{{ scope.row.week }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="studentId" label="学号" width="180">
        <template slot-scope="scope">
          <span class="table-text">{{ scope.row.studentId }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dayOfWeek" label="星期" width="180">
        <template slot-scope="scope">
          <span class="table-text">{{ scope.row.dayOfWeek }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="period" label="节次" width="180">
        <template slot-scope="scope">
          <span class="table-text">{{ scope.row.period }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="violation_content" label="迟到原因" width="180">
        <template slot-scope="scope">
          <span class="table-text">{{ scope.row.violation_content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.row)" :disabled="scope.row.violation_content === '已补签'">补签</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      @current-change="handleCurrentChange"
    ></el-pagination>
</div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'daiqian',
    data() {
    return {
      overTime:[],
      currentPage: 1,
          pageSize: 5,
          totalCount: 0,
          searchQuery: '', 
    };
  },
  created() {
    this.generateTableData();
  },
  created() {
      this.fetchOverTime();
  },
  methods: {
    handleCurrentChange(val){
        this.currentPage=val;
        this.fetchOverTime();
    },
    searchzc() {
            // 重置当前页为第一页
            this.currentPage = 1;
            // 调用fetchOverTime来加载搜索后的数据
            this.fetchOverTime();
        },
    fetchOverTime() {
                  // 构造包含搜索参数的URL
                  let queryParams = `?page=${this.currentPage}&pageSize=${this.pageSize}`;
            if (this.searchQuery) {
                queryParams += `&search=${this.searchQuery}`; // 假设后端接受名为search的查询参数
            }
        axios.get(`api/admin/overtimelognum${queryParams}`)
              .then(response => {
                this.totalCount = response.data.data;
                //  let t=response.data.data%10
                // //  console.log(t)
                //  if(t==0){
                //   this.totalCount=response.data.data/10;
                //  }else{
                //    this.totalCount= Math.floor(response.data.data / 10) + 1;
                //    console.log(this.totalCount)
                //  }
              }).catch(error => {
                  console.error(error);
              });
          axios.get(`api/admin/overtimepage${queryParams}`)
              .then(response => {
                  this.overTime = response.data.data;
              }).catch(error => {
                  console.error(error);
              });
      },
    handleEdit(row){
        if(row.violation_content=='已补签'){
            alert('已补签')
            return; 
        }
        axios.post('api/admin/buqian',row)
        .then(response => {
            alert(response.data.data);
            //刷新页面
            this.generateTableData();
        })
        .catch(error => {
          console.log(error);
        });
    },
    generateTableData() {
        axios.get('api/admin/overtime',{
        params: {
          studentId: this.studentId,
        }
      })
        .then(response => {
          console.log(response.data.data);
          this.overTime=response.data.data;
        })
        .catch(error => {});
    },
    reset(){
      this.searchQuery='';
      this.fetchOverTime();
    }
  }
}
</script>

<style scoped>
.table-text {
  font-size: 18px;
  font-weight: bold;
}

.el-table {
  width: 100%;
}
</style>